<template>
  <div>
    <div class="flex-container" style="flex-direction: row;">
      <!-- 右侧表格 -->
      <div class="right-table-container">
        <!-- 搜索表单 -->
        <div class="search-form">
          <div class="search-form-left">
            <a-form layout="inline">
              <a-form-item label="姓名">
                <a-input v-model="searchForm.person_name" placeholder="请输入姓名" allowClear />
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>

        <!-- 表格 -->
        <div class="table-container">
          <vxe-table :data="tableData" :loading="tableLoading">
            <vxe-column field="person_name" title="姓名"></vxe-column>
            <vxe-column field="position" title="职位"></vxe-column>
            <vxe-column field="phone_number" title="手机号"></vxe-column>
            <!-- <vxe-column field="is_actived" title="账号是否激活">
              <template v-slot="{ row }">
                <a-tag v-if="row.is_actived === 1" color="blue">已激活</a-tag>
                <a-tag v-else color="red">未激活</a-tag>
              </template>
            </vxe-column> -->
            <vxe-column field="can_approve_level1" title="一级审批权限">
              <template v-slot="{ row }">
                <a-switch :checked="row.can_approve_level1" @change="handleUpdateActived(1,row)" />
              </template>
            </vxe-column>
            <vxe-column field="can_approve_level2" title="二级审批权限">
              <template v-slot="{ row }">
                <a-switch :checked="row.can_approve_level2" @change="handleUpdateActived(2,row)" />
              </template>
            </vxe-column>
            <!-- <vxe-column field="can_approve_level3" title="三级审批权限">
              <template v-slot="{ row }">
                <a-switch :checked="row.can_approve_level3" @change="handleUpdateActived(3,row)" />
              </template>
            </vxe-column> -->
          </vxe-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <a-pagination v-model="pagination.page" :total="pagination.total" :page-size="pagination.page_size"
              :page-size-options="['10', '20', '30', '40']" show-size-changer show-quick-jumper
              :show-total="total => `共 ${total} 条记录`" @change="handlePageChange" @showSizeChange="handleSizeChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    apiGetPersonnelWithPermissions,
    apiUpdatePersonApprovalPermissions,
    apiDepartmentList
  } from '@/api/featch'

  export default {
    name: 'ApprovalUser',
    data() {

      return {
        // 表格数据
        tableData: [],
        tableLoading: false,
        loading: false,

        // 部门列表
        departmentList: [],

        // 搜索表单
        searchForm: {
          person_name: '',
          page: 1,
          page_size: 10
        },

        // 分页信息
        pagination: {
          total: 0,
          page: 1,
          page_size: 10,
          total_pages: 0
        },
      }
    },
    mounted() {
      // 获取部门列表
      this.getDepartmentList()
      // 获取人员列表
      this.handleGetTableData()
    },
    methods: {
      /**
       * @description 获取部门列表
       */
      getDepartmentList() {
        apiDepartmentList()
          .then(res => {
            if (res.code === 200) {
              this.departmentList = res.data
            }
          })
      },
      /**
       * @description 获取表格数据
       */
      handleGetTableData() {
        this.tableLoading = true
        apiGetPersonnelWithPermissions(this.searchForm)
          .then(res => {
            this.tableLoading = false
            if (res.code === 200) {
              res.data.list.map(item => {
                item.can_approve_level1 = (item.can_approve_level1 === 1)
                item.can_approve_level2 = (item.can_approve_level2 === 1)
                item.can_approve_level3 = (item.can_approve_level3 === 1)
              })
              this.tableData = res.data.list
              this.pagination = res.data.pagination
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.toString())
          })
      },
      /**
       * @description 搜索
       */
      handleSearch() {
        this.searchForm.page = 1
        this.handleGetTableData()
      },
      /**
       * @description 重置搜索
       */
      handleReset() {
        this.searchForm = {
          person_name: '',
          page: 1,
          page_size: 10
        }
        this.handleGetTableData()
      },
      /**
       * @description 页码改变
       */
      handlePageChange(page) {
        this.searchForm.page = page
        this.handleGetTableData()
      },
      /**
       * @description 每页条数改变
       */
      handleSizeChange(current, size) {
        this.searchForm.page = 1
        this.searchForm.page_size = size
        this.handleGetTableData()
      },
      /**
       * @description 启用
       */
      handleUpdateActived(level, row) {
        switch (level) {
          case 1:
            row.can_approve_level1 = !row.can_approve_level1
            break
          case 2:
            row.can_approve_level2 = !row.can_approve_level2
            break
          case 3:
            row.can_approve_level3 = !row.can_approve_level3
            break
        }
        apiUpdatePersonApprovalPermissions({
          person_id: row.person_id,
          can_approve_level1: row.can_approve_level1,
          can_approve_level2: row.can_approve_level2,
          can_approve_level3: row.can_approve_level3,
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .flex-container {
    display: flex;
    height: 100%;
    width: 100%;

    .right-table-container {
      flex: 1;
      padding: 24px;
      background: #fff;

      .search-form {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .search-form-left {
          flex: 1;
        }

        .search-form-right {
          margin-left: 16px;
        }
      }

      .table-container {
        position: relative;
      }

      .pagination-container {
        margin-top: 16px;
        text-align: right;
      }
    }
  }
</style>